<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar title="地址"
                 fixed
                 @click-left="$router.back(-1)">
      <template #left>
        <img class="icon_right"
             src="@/assets/img/down_left.png"
             alt="">
      </template>
    </van-nav-bar>

    <!-- 盒子 -->
    <div class="box">
      <van-cell-group>
        <van-field v-model="province"
                   @click="provinceShow = true"
                   @focus="fieldSelect"
                   label="省份"
                   center
                   clearable
                   placeholder="请选择省份" />
        <van-field v-model="city"
                   @click="cityShow = true"
                   @focus="fieldSelect"
                   label="城市"
                   center
                   clearable
                   placeholder="请选择城市" />
        <van-field v-model="hospital"
                   @click="hospitalShow = true"
                   @focus="fieldSelect"
                   label="医院名称"
                   center
                   clearable
                   placeholder="请选择医院名称" />
        <van-field v-model="department"
                   @click="departmentShow = true"
                   @focus="fieldSelect"
                   label="科室"
                   center
                   clearable
                   placeholder="请选择科室" />
      </van-cell-group>
      <van-button @click="sub"
                  class="confirm"
                  type="info">确认修改</van-button>
    </div>

    <!-- ---分界线--- -->

    <!-- 省份选择 -->
    <van-popup v-model="provinceShow"
               round
               position="bottom">
      <van-picker title="省份"
                  show-toolbar
                  :columns="provinceColumns.map(it=> it.province)"
                  @confirm="provinceConfirm"
                  @cancel="provinceShow = false" />
    </van-popup>
    <!-- 市选择 -->
    <van-popup v-model="cityShow"
               round
               position="bottom">
      <van-picker title="城市"
                  show-toolbar
                  :columns="cityColumns.map(it=> it.city)"
                  @confirm="cityConfirm"
                  @cancel="cityShow = false" />
    </van-popup>
    <!-- 医院选择 -->
    <van-popup v-model="hospitalShow"
               round
               position="bottom">
      <van-picker title="医院"
                  show-toolbar
                  :columns="hospitalColumns.map(it=> it.hospital)"
                  @confirm="hospitalConfirm"
                  @cancel="hospitalShow = false" />
    </van-popup>
    <!-- 科室选择 -->
    <van-popup v-model="departmentShow"
               round
               position="bottom">
      <van-picker title="科室"
                  show-toolbar
                  :columns="departmentColumns.map(it=> it.department)"
                  @confirm="departmentConfirm"
                  @cancel="departmentShow = false" />
    </van-popup>

  </div>
</template>

<script>
import { editPersonal, personal } from '@/api/common'
import { provinceList, getCityByProvice, getHospitalByCity, getDepartByHospital } from '@/api/login'
export default {
  name: '',
  data () {
    return {
      province: '', // 省
      city: '', // 市
      hospital: '', // 医院
      department: '', // 科室

      provinceShow: false,
      cityShow: false,
      hospitalShow: false,
      departmentShow: false,

      provinceColumns: [],
      cityColumns: [],
      hospitalColumns: [],
      departmentColumns: [],

      hospital_id: '', // 传参需要用到医院id
      department_id: '' // 同上 科室id
    }
  },
  created () {
    // 获取省份
    this.provinceList()
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    fieldSelect () {
      document.activeElement.blur()
    },
    // 确认-省份
    provinceConfirm (event, index) {
      this.province = event // 选择省份赋值回显
      this.getCityByProvice(this.provinceColumns[index].id) // 省id获取市列表
      this.provinceShow = false // 关闭弹出层
      // 每次选择了省份清空下面所有项
      this.clear(1)
    },
    // 确认-城市
    cityConfirm (event, index) {
      this.city = event
      this.getHospitalByCity(this.cityColumns[index].id) // 市id获取医院列表
      this.cityShow = false
      this.clear(2)
    },
    // 确认-医院
    hospitalConfirm (event, index) {
      this.hospital = event
      this.hospital_id = this.hospitalColumns[index].id
      this.getDepartByHospital(this.hospitalColumns[index].id)
      this.hospitalShow = false
      this.clear(3)
    },
    // 确认-科室
    departmentConfirm (event, index) {
      this.department = event
      this.department_id = this.departmentColumns[index].id
      this.departmentShow = false
    },
    // 获取省份
    async provinceList () {
      const { code, msg, data } = await provinceList()
      if (code !== 1) return this.$toast.fail(msg)
      this.provinceColumns = data
    },
    // 根据省id 获取市
    async getCityByProvice (province_id) {
      const { code, msg, data } = await getCityByProvice({ province_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.cityColumns = data
    },
    // 根据市id获取医院列表
    async getHospitalByCity (city_id) {
      const { code, msg, data } = await getHospitalByCity({ city_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.hospitalColumns = data
    },
    // 根据医院id获取科室列表
    async getDepartByHospital (hospital_id) {
      const { data, msg, code } = await getDepartByHospital({ hospital_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.departmentColumns = data
    },
    // 确认修改
    async sub () {
      const { province, city, hospital, department, hospital_id, department_id } = this
      if (!province) return this.$toast.fail('省份不能为空')
      if (!city) return this.$toast.fail('城市不能为空')
      if (!hospital) return this.$toast.fail('医院名称不能为空')
      if (!department) return this.$toast.fail('科室不能为空')
      const { code, msg } = await editPersonal({ province, city, hospital, department, hospital_id, department_id })
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success(msg)
      // 刷新一下用户信息
      this.getUserInfo()
      setTimeout(() => {
        this.$router.back()
      }, 1000)
    },
    async getUserInfo () {
      const { code, msg, data } = await personal()
      if (code !== 1) return this.$toast.fail(msg)
      this.$store.commit('SET_USER_INFO', data)
    },
    clear (type) {
      if (type === 1) { // 选择省份
        this.city = ''
        this.hospital = ''
        this.department = ''
        this.hospitalColumns = []
        this.departmentColumns = []
      }
      if (type === 2) { // 城市
        this.hospital = ''
        this.department = ''
        this.departmentColumns = []
      }
      if (type === 3) { // 医院
        this.department = ''
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-cell {
  line-height: 34px;
  margin-bottom: 6px;
}
/deep/.van-cell__title {
  width: 75px;
  font-weight: 600;
}
.icon_right {
  width: 12px;
  height: 21px;
  vertical-align: middle;
}

.box {
  margin-top: 40px;
  padding-top: 10px;
  // padding: 10px 20px;
  background: #f7f8fa;
  height: calc(100vh - 50px);

  .confirm {
    margin-top: 10px;
    width: 80%;
    height: 48px;
    margin-top: 40px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
    border-radius: 37px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    margin-left: 10%;
    border: none;
    color: #ffffff;
  }
}
</style>
